<template>
    <div id="cesiumContainer"></div>
</template>

<script>
    import * as Cesium from 'cesium/Cesium'

    export default {
        name: 'TimeDynamicPointCloud',
        data() {
            return {}
        },
        mounted() {
            this.initCesium();
            this.addTimeDynamicPointCloud();
        },
        methods: {
            initCesium() {
                this.viewer = new Cesium.Viewer('cesiumContainer', {
                    animation: true,
                    baseLayerPicker: false,
                    fullscreenButton: false,
                    geocoder: false,
                    homeButton: false,
                    infoBox: true,
                    sceneModePicker: false,
                    navigationHelpButton: false,
                    scene3DOnly: true,
                    timeline: true,
                    selectionIndicator: false,//是否显示选取指示器组件
                    shouldAnimate: true,     //自动播放动画控件
                    shadows: true,//是否显示光照投射的阴影
                    terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY,//地质接收阴影
                    sceneMode: Cesium.SceneMode.SCENE3D,
                    imageryProvider: new Cesium.ArcGisMapServerImageryProvider({
                        url: "https://server.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer?f=jsapi"
                    }),
                });
                this.viewer._cesiumWidget._creditContainer.style.display = "none";  //	去除版权信息
            },
            addTimeDynamicPointCloud() {
                //动态时间点云的时间数组
                const dates = [
                    "2018-07-19T15:18:00Z",
                    "2018-07-19T15:18:00.5Z",
                    "2018-07-19T15:18:01Z",
                    "2018-07-19T15:18:01.5Z",
                    "2018-07-19T15:18:02Z",
                    "2018-07-19T15:18:02.5Z",
                ];

                //动态时间点云的链接
                const uris = [
                    "http://localhost:8888/model/3dtiles/PointCloud/PointCloudTimeDynamic/0.pnts",
                    "http://localhost:8888/model/3dtiles/PointCloud/PointCloudTimeDynamic/1.pnts",
                    "http://localhost:8888/model/3dtiles/PointCloud/PointCloudTimeDynamic/2.pnts",
                    "http://localhost:8888/model/3dtiles/PointCloud/PointCloudTimeDynamic/3.pnts",
                    "http://localhost:8888/model/3dtiles/PointCloud/PointCloudTimeDynamic/4.pnts",
                ];

                //数据的回调
                function dataCallback(interval, index) {
                    return {
                        uri: uris[index],
                    };
                }

                //构建动态点云的时间数组
                const timeIntervalCollection = Cesium.TimeIntervalCollection.fromIso8601DateArray(
                    {
                        iso8601Dates: dates,
                        dataCallback: dataCallback,
                    }
                );

                //构建点云对象
                const pointCloud = new Cesium.TimeDynamicPointCloud({
                    intervals: timeIntervalCollection,//点云的时间间隔
                    clock: this.viewer.clock,//当前场景的渲染时间
                    style: new Cesium.Cesium3DTileStyle({ //设置点云的样式
                        pointSize: 5,//设置点云的大小
                        color: 'color("red", 0.5)',//设置点云的颜色
                        show: true//设置点云显示
                    }),
                });
                //点云帧加载变化监听
                pointCloud.frameChanged.addEventListener((timeDynamicPointCloud)=> {
                    console.log(timeDynamicPointCloud)
                    //相机定位到包围球
                    this.viewer.camera.viewBoundingSphere(timeDynamicPointCloud.boundingSphere);
                });

                //点云帧加载失败监听事件
                pointCloud.frameFailed.addEventListener((error)=> {
                    console.log(`An error occurred loading frame: ${error.uri}`);
                    console.log(`Error: ${error.message}`);
                });
                //点云加载完毕
                pointCloud.readyPromise.then((point) => {
                   console.log(point)
                })
                //添加点云图元到场景中
                this.viewer.scene.primitives.add(pointCloud);

                //构建动态时间点云
                const start = Cesium.JulianDate.fromIso8601(dates[0]);
                const stop = Cesium.JulianDate.fromIso8601(dates[dates.length - 1]);
                const clock = this.viewer.clock;
                clock.startTime = start;
                clock.currentTime = start;
                clock.stopTime = stop;
                clock.clockRange = Cesium.ClockRange.UNBOUNDED;//帧动画完了，保持到最后一个的状态，UNBOUNDED，LOOP_STOP
                clock.multiplier=0.5
                // this.viewer.zoomTo(
                //     pointCloud,
                //     new Cesium.HeadingPitchRange(0.0, -0.5, 50.0)
                // );

                let handler = this.viewer.screenSpaceEventHandler;
                //左键点击事件
                handler.setInputAction( (event)=> {
                    //用来拾取三维空间中的物体
                    let pickedFeature = this.viewer.scene.pick(event.position);
                    if (!Cesium.defined(pickedFeature)) {
                        console.log("nothing picked")
                        return;
                    }
                    console.log(pickedFeature)
                }, Cesium.ScreenSpaceEventType.LEFT_CLICK)
            }
        },
    }
</script>

